import React, { Component } from 'react';
import "../../styles/Index/Tabbar.scss"

class Tabbar extends Component {
    state = {
        tabbarlist:[
            "店铺",
            "分类",
            "全部商品",
            "购物车",
            "个人中心",
        ],
        clickState:0
    }
    stateChange(index){
        this.setState({clickState:index});
    }
    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.tabbarlist.map((item,index)=>{
                        return (
                            <li className={this.state.clickState == index ? 'active' : ''} onClick={()=>{this.stateChange(index)}} key={index}>{item}</li>
                        )
                    })
                }
            </div>
        );
    }
}

export default Tabbar;